/*
 * AppGo使用的 图片查看插件
 * Author : lufeng@bingosoft.net
 * Version: 1.0.0
 * Date : 2015/11/17
 */
(function($) {

    var windowMargin = 8; //加多边距的宽高，使得图片看起来有边框效果

//图片查看器
    $.fn.extend({

        photoGallery: function(options) {

            var isFirefox = navigator.userAgent.indexOf("Firefox") > -1 ;
            var MOUSEWHEEL_EVENT = isFirefox ? "DOMMouseScroll" : "mousewheel";
            var defaults = {
                //图片缩放倍率
                ratio : 0.8,
                //右下角缩略图宽度
                thumbnailsWidth : 180,
                //右下角缩略图高度
                thumbnailsHeight : 120,
                //HTML模版
                template : {
                    //操作工具
                    OPERTATION : '<div class="oper">' +
                        '<span class="prev"><i class="icon_tool-prev"></i></span>' +
                        '<span class="next"><i class="icon_tool-next"></i></span>' +
                        '</div>' +
                        '<div class="tool">' +
                        '<div class="toolct">' +
                        '<span class="oper_fullscreen" title="查看全屏"><i class="icon_tool-fullscreen"></i></span>' +
                        '<span class="oper_bigger" title="放大图片"><i class="icon_tool-bigger"></i></span>' +
                        '<span class="oper_smaller" title="缩小图片"><i class="icon_tool-smaller"></i></span>' +
                        '<span class="oper_rotate" title="向右旋转"><i class="icon_tool-rotate"></i></span>' +
                        /*'<span class="oper_download" title="下载图片" ><i class="icon_tool-download"></i></span>' +*/
                        '</div>' +
                        '</div>',
                    //缩略图
                    THUMBNAILS : "<div class='thumbnails'>" +
                        '<span class="thumbClose" title="关闭缩略图"><i class="icon_close-small"></i></span>' +
                        '<img ondragstart="return false;"/>' +
                        '<div class="thumbDrag"><span></span></div>' +
                        "</div>",
                    //大图
                    IMAGE : '<img class="image" ondragstart="return false;"/>'
                }
            };

            var o = $.extend(defaults, options),
                $gallery = $(this);
            console.log(o);
            $gallery.append(o.template.OPERTATION).append(o.template.THUMBNAILS);

            var $tool = $(this).find(".tool"),
                $fullscreen = $(this).find(".oper_fullscreen"),
                $bigger = $(this).find(".oper_bigger"),
                $smaller =  $(this).find(".oper_smaller"),
                $rotate = $(this).find(".oper_rotate"),
                $download = $(this).find(".oper_download"),
                $prev = $(this).find(".prev"),
                $next = $(this).find(".next"),
                $thumbnails = $(this).find(".thumbnails"),
                $image,
                $thumbImg,
                imageWidth,
                imageHeight,
                imgRatio,
                dragX,
                dragY,
                cW,
                cH,
                w,h,isVertical,
                thumbX,
                thumbY;

            //上一张
            $prev.on('click',function(){
                if(o.activeIndex > 0) o.activeIndex--;
                toggleImage();
            }).on("mouseover",function(e){
                if(o.activeIndex > 0)
                    $(this).addClass("active");
            }).on("mouseout",function(e){
                $(this).removeClass("active");
            });

            //下一张
            $next.on('click',function(){
                if(o.activeIndex < o.imgs.length -1) o.activeIndex++;
                toggleImage();
            }).on("mouseover",function(e){
                if(o.activeIndex < o.imgs.length -1)
                    $(this).addClass("active");
            }).on("mouseout",function(e){
                $(this).removeClass("active");
            });

            //缩略图
            $thumbnails.css({
                height: o.thumbnailsHeight,
                width : o.thumbnailsWidth
            }).on("mouseenter",function(e){
                thumbX = -1;
            }).on("mousedown",function(e){
                thumbX=e.pageX || e.clientX;
                thumbY=e.pageY || e.clientY;

                cW = document.body.clientWidth;
                cH = document.body.clientHeight;
                e.stopPropagation();
            }).on("mousemove",function(e){
                if(thumbX > 0){
                    var nextDragX=e.pageX || e.clientX;
                    var nextDragY=e.pageY || e.clientY;
                    var $td= $(this).find(".thumbDrag"),
                        imageWidth = $image.width(),
                        imageHeight = $image.height(),
                        thumbImgWidth = $thumbImg.width(),
                        thumbImgHeight = $thumbImg.height(),
                        left =parseFloat($td.css("left")) +  (nextDragX - thumbX),
                        top =parseFloat($td.css("top")) + (nextDragY - thumbY),
                        w = $td.width(),
                        h = $td.height(),
                        it,
                        il,
                        maxL,
                        maxT;

                    if(isVertical){
                        thumbImgWidth = [thumbImgHeight, thumbImgHeight = thumbImgWidth][0];
                        imageWidth = [imageHeight, imageHeight = imageWidth][0];
                    }
                    it = (o.thumbnailsHeight - thumbImgHeight) / 2 ,
                        il = (o.thumbnailsWidth - thumbImgWidth) / 2,
                        maxL = o.thumbnailsWidth - w - il - 2, //减去2像素边框部分
                        maxT = o.thumbnailsHeight - h - it - 2;

                    if(left < il ) left = il;
                    else if(left > maxL) left = maxL;

                    if(top < it ) top = it;
                    else if(top > maxT) top = maxT;

                    $td.css({
                        left : left,
                        top : top
                    })
                    thumbX=nextDragX;
                    thumbY=nextDragY;

                    if(imageWidth < cW) left = (cW - imageWidth) / 2;
                    else left = -imageWidth * (left-il) / thumbImgWidth;

                    if(imageHeight < cH ) top = (cH - imageHeight) / 2;
                    else top = -imageHeight * (top-it) / thumbImgHeight;

                    $image.offset({
                        left : left,
                        top : top
                    });
                }
            }).on("mouseup",function(e){
                thumbX = -1;
            });

            $thumbnails.find(".thumbClose").on("click",function(){
                $thumbnails.hide();
            });

            //显示工具栏
            $gallery.on("mouseover",function(e){
                $tool.show();

            }).on("mouseenter",function(e){
                dragX = -1;
            }).on("mouseout",function(e){
                $tool.hide();
            }).on("mousedown",function(e){
                dragX=e.pageX || e.clientX;
                dragY=e.pageY || e.clientY;

                cW = document.body.clientWidth;
                cH = document.body.clientHeight;
                e.stopPropagation();
            }).on("mousemove",function(e){
                if(dragX > 0){
                    var nextDragX=e.pageX || e.clientX;
                    var nextDragY=e.pageY || e.clientY ;
                    var o = $image.offset(),
                        left =o.left +  (nextDragX - dragX),
                        top =o.top + (nextDragY - dragY),
                        w = $image.width(),
                        h = $image.height();

                    if(isVertical){
                        w = [h, h = w][0];
                    }
                    if(w > cW){
                        if(left > 0){
                            left = 0 ;
                        }
                        else if(left < cW - w){
                            left = cW - w;
                        }
                    }else{
                        left = o.left;
                    }
                    if(h > cH){
                        if(top > 0){
                            top = 0 ;
                        }
                        else if(top < cH - h){
                            top = cH - h;
                        }
                    } else{
                        top = o.top;
                    }

                    $image.offset({
                        left : left,
                        top : top
                    });
                    dragX=nextDragX;
                    dragY=nextDragY;
                    setThumbnails(); //缩略图拖拽点
                }
            }).on("mouseup",function(e){
                dragX = -1;
            });

            //全屏
            var isMax,preWidth, preHeight, preTop, preLeft;
            $fullscreen.on("click", function(){
                var parentD = window.parent.document,
                    windows = $(parentD.getElementById("window")),
                    J = $(parentD.getElementById("J_pg"));
                if(!isMax){
                    isMax = true;
                    preWidth = document.body.clientWidth;
                    preHeight = document.body.clientHeight;
                    preTop = windows.css("top");
                    preLeft = windows.css("left");
                    J.css({
                        top: 30,
                        left : 0,
                        width : parentD.body.clientWidth,
                        height : parentD.body.clientHeight-60,
                    });
                    parent.$(".window").css({width : parentD.body.clientWidth});
                    //$(".window").css({width : parentD.body.clientWidth});
                    parent.$(".window").css({
                        /*left : (document.body.clientWidth - winWidth) /2,
                        top : (document.body.clientHeight - winHeight) /2 + 30*/
                        top:0,
                        left : 0
                    });
                    $(".main").show();
                    $('.icon_tool-fullscreen').css("background-image","");
                    $('.icon_tool-fullscreen').css("background","url(icon/small_screen.png) no-repeat");
                    $('.icon_tool-fullscreen').css("background-size","contain");
                    $('.oper_fullscreen').attr('title','缩小全屏');
                } else{
                    isMax = false;
                    windows.css({
                        top: preTop,
                        left : preLeft,
                        width : preWidth,
                        height : preHeight
                    })
                    J.css({
                        // left : (document.body.clientWidth - winWidth) /2,
                        // top : (document.body.clientHeight - winHeight) /2 + 30,
                        top: 38,
                        left : 0,
                        width : preWidth,
                        height : preHeight
                    });
                    parent.$(".window").css({width : preWidth});
                    $('.icon_tool-fullscreen').css("background-image","");
                    $('.icon_tool-fullscreen').css("background-image","url(icon/full_screen.png)");
                    $('.oper_fullscreen').attr('title','查看全屏');

                }
            });

            //放大图片
            $bigger.on("click", function(){
                biggerImage();
            });

            //缩小图片
            $smaller.on("click", function(){
                smallerImage();
            });

            //旋转
            $rotate.on("click", function(){

                var rotateClass = $image.attr("class").match(/(rotate)(\d*)/);

                if(rotateClass){
                    var nextDeg = (rotateClass[2] * 1 + 90) % 360;
                    $image.removeClass(rotateClass[0]).addClass("rotate" + nextDeg);
                    $thumbImg.removeClass(rotateClass[0]).addClass("rotate" + nextDeg);
                    resizeImage(nextDeg);
                    resizeThumbImg(nextDeg);
                    isVertical = nextDeg == 90 || nextDeg == 270;
                } else{
                    $image.addClass("rotate90");
                    $thumbImg.addClass("rotate90");
                    resizeImage("90");
                    resizeThumbImg("90");
                    isVertical = true;
                }
            });

            //下载
            $download.on("click", function(){
                var imgUrl = $image.attr("src");
                if(!imgUrl) return;
                alert("没有找到兼容所有浏览器方法，所以暂不实现");
            });

            $(window).on("resize",function(){
                setImagePosition();
            });

            if(document.attachEvent){
                document.attachEvent("on"+function(e){
                    mouseWheelScroll(e);
                });
            } else if(document.addEventListener){
                document.addEventListener(MOUSEWHEEL_EVENT, function(e){
                    mouseWheelScroll(e);
                }, false);
            }

            function mouseWheelScroll(e){
                var _delta = parseInt(e.wheelDelta || -e.detail);
                //向上滚动
                if (_delta > 0) {
                    biggerImage();
                }
                //向下滚动
                else {
                    smallerImage();
                }
            }

            //键盘左右键
            document.onkeydown = function(e){

                e = e || window.event;
                if (e.keyCode) {
                    if(e.keyCode == 37 ){ //left
                        if(o.activeIndex > 0) o.activeIndex--;
                        toggleImage();
                    }
                    if(e.keyCode == 39 ){ //right
                        if(o.activeIndex < o.imgs.length -1) o.activeIndex++;
                        toggleImage();
                    }
                }
            };

            function init(){
                toggleImage();
                //$fullscreen.trigger("click");
                $(o.imgs).each(function(i, img){
                    $(o.template.IMAGE)
                        .appendTo($gallery)
                        .attr("src", img.url)
                        .attr("index", i)
                        .css({
                            width : img.imgWidth,
                            height : img.imgHeight,
                            left : (cW - img.imgWidth)/2,
                            top: (cH - img.imgHeight)/2
                        }).on("dblclick", function(){
                        app.window.close();
                    }); ;
                });
                $image = $(".image[index='"+o.activeIndex+"']", $gallery).addClass("active");
            }

            function toggleImage(){
                console.log(o.imgs);
                console.log(o.imgs[o.activeIndex]);
                imageWidth = o.imgs[o.activeIndex].imgWidth;
                imageHeight = o.imgs[o.activeIndex].imgHeight;
                imgRatio = imageWidth/ imageHeight;
                cW = document.body.clientWidth;
                cH = document.body.clientHeight;
                $(".image", $gallery).removeClass("active");
                $image = $(".image[index='"+o.activeIndex+"']", $gallery).addClass("active").css({
                    width : imageWidth,
                    height : imageHeight
                }).removeClass("rotate0 rotate90 rotate180 rotate270");
                $thumbImg = $thumbnails.find("img").attr("src", o.imgs[o.activeIndex].url);
                $thumbnails.find("img").removeAttr("class").removeAttr("style");
                isVertical = false;
                $thumbnails.hide();
                $prev.removeClass("active");
                $next.removeClass("active");
                setImagePosition();
            }


            function smallerImage(){
                var w = $image.width(),
                    h = $image.height(),
                    nextW = w * o.ratio,
                    nextH = h * o.ratio;
                if(nextW - w < 1) nextW = Math.ceil(nextW);
                var percent =  (nextW / imageWidth * 100).toFixed(0) ;
                if(percent > 90 && percent < 110){
                    percent = 100;
                    nextW = imageWidth;
                    nextH = imageHeight;
                }
                else if(percent > 1600) {
                    percent = 1600;
                    nextW = imageWidth * 16;
                    nextH = imageHeight * 16;
                }

                $image.width(nextW).height(nextH);
                setImagePosition();
                showPercentTip(percent);
                showThumbnails(nextW, nextH);
            }
            function biggerImage(){
                var w = $image.width(),
                    h = $image.height(),
                    nextW,
                    nextH;
                var percent =  (w / o.ratio / imageWidth * 100).toFixed(0) ;
                if(percent < 5) {
                    percent = 5;
                    nextW = imageWidth / 20;
                    nextH = imageHeight / 20;
                }
                else if(percent > 90 && percent < 110){
                    percent = 100;
                    nextW = imageWidth;
                    nextH = imageHeight;
                } else if(percent < 3200){
                    nextW = w / o.ratio;
                    nextH = h / o.ratio;
                } else {
                    percent = 3200;
                    return
                }

                $image.width(nextW).height(nextH);
                setImagePosition();
                showPercentTip(percent);
                showThumbnails(nextW, nextH);
            }

            //显示缩略图
            function showThumbnails(width, height){
                if(isVertical) width = [height, height = width][0];
                if(width > document.body.clientWidth || height > document.body.clientHeight){
                    $thumbnails.show();
                    setThumbnails();
                } else{
                    $thumbnails.hide();
                }
            }

            //重置图片宽高
            function resizeImage(rotateDeg){

                var mH = document.body.clientHeight - windowMargin,
                    mW = document.body.clientWidth - windowMargin;
                if(rotateDeg == '90' || rotateDeg == '270'){
                    mW = [mH, mH = mW][0];
                }

                var width, height;
                width = Math.min(imageWidth, mW);
                height = Math.min(imageHeight, mH);

                if(width / height > imgRatio){
                    width = height * imgRatio;
                } else{
                    height = width / imgRatio;
                }

                $image.css({
                    width:width,
                    height:height
                });
                setImagePosition();
            }

            function resizeThumbImg(rotateDeg){
                var maxW = o.thumbnailsWidth, maxH = o.thumbnailsHeight;
                if(rotateDeg == '90' || rotateDeg == '270'){
                    maxW = [maxH, maxH = maxW][0];
                }
                $thumbImg.css({
                    maxWidth : maxW,
                    maxHeight : maxH
                });
                $thumbnails.hide();
            }

            //显示百分比提示
            function showPercentTip(percent){
                $gallery.find(".percentTip").remove();
                $("<div class='percentTip'><span>"+percent+"%</span></div>").appendTo($gallery).fadeOut(1500);
            }

            //设置图片位置
            function setImagePosition(){
                var w = $image.width(),
                    h = $image.height(),
                    cW = document.body.clientWidth,
                    cH = document.body.clientHeight;

                var left = (cW - w)/2,
                    top = (cH - h)/2;

                $image.css("left", left +"px").css("top", top+"px");
            }

            //设置缩略图拖拽区域
            function setThumbnails(){
                var $img = $thumbnails.find("img"),
                    sW = $img.width(),
                    sH = $img.height(),
                    w = $image.width(),
                    h =  $image.height(),
                    imf = $image.offset(),
                    imfl = imf.left,
                    imft = imf.top,
                    cW = document.body.clientWidth,
                    cH = document.body.clientHeight,
                    tW,
                    tH,
                    tl,
                    tt;

                if(isVertical){
                    sW = [sH, sH = sW][0];
                    w = [h, h = w][0];
                }

                tW = sW / (w / cW);
                if(w < cW) tW = sW;
                tH = sH / (h / cH);
                if(h < cH) tH = sH;
                tl = (o.thumbnailsWidth - sW)/2 + -imfl/w * sW ;
                if(w < cW) tl = (o.thumbnailsWidth - sW)/2;
                tt = (o.thumbnailsHeight - sH)/2 + -imft/h * sH ;
                if(h < cH) tt = (o.thumbnailsHeight - sH)/2;
                $thumbnails.find(".thumbDrag").css({
                    width: tW,
                    height: tH,
                    left: tl,
                    top: tt
                });
            }

            init();
            return this;
        }
    });

    $.extend({
        //打开图片查看器
        openPhotoGallery : function(obj){
            console.log("图片放大");
            console.log(obj);
            var $img = $(obj),
                imgUrl = $img[0].src;
            if(!imgUrl) return;

            //HTML5提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高
            var img = $img[0],
                imgHeight = img.naturalHeight,
                imgWidth = img.naturalWidth,
                ratio  = imgWidth / imgHeight,
                wH = 415,
                wW = 615,
                winHeight,
                winWidth,
                maxHeight = document.body.clientHeight - windowMargin * 2,
                maxWidth = document.body.clientWidth- windowMargin;

            winWidth = Math.max(wW, imgWidth);
            winHeight = Math.max(wH, imgHeight);

            console.log(winWidth+"==winWidth=====");
            console.log(winHeight+"==winHeight=====");

            if(winWidth > maxWidth) {
                winWidth = maxWidth;
                winHeight =Math.max(wH, Math.ceil(winWidth / ratio));
                if(imgWidth > winWidth) {
                    imgWidth = winWidth;
                    imgHeight = Math.ceil(imgWidth / ratio);
                }
            }

            if(winHeight > maxHeight) {
                winHeight = maxHeight;
                winWidth = Math.max(wW, Math.ceil(winHeight * ratio));
                if(imgHeight > winHeight) {
                    imgHeight = winHeight;
                    imgWidth = Math.ceil(imgHeight * ratio);
                }
            }

            var $gallerys = $(obj).closest(".photoCon"),
                activeIndex=0,
                imgs = [];
            $gallerys.find(".imgZoom").each(function(i, elem){
                var url = this.src,
                    img = $(this)[0],
                    nH = img.naturalHeight,
                    nW = img.naturalWidth,
                    ratio  = nW / nH,
                    w = nW,
                    h = nH;
                if(url == imgUrl){
                    activeIndex = i;
                    w = imgWidth;
                    h = imgHeight;
                }
                else{
                    if(nW > winWidth) {
                        w = winWidth;
                        nH = h = Math.ceil(w / ratio);
                        if( h > winHeight){
                            nH = h = winHeight;
                            w = Math.ceil(h * ratio);
                        }
                    }
                    if(nH > winHeight) {
                        h = winHeight;
                        w = Math.ceil(h * ratio);
                        if( w > winWidth){
                            w = winWidth;
                            h = Math.ceil(w / ratio);
                        }
                    }
                }
                imgs.push({
                    url: url,
                    imgHeight : h,
                    imgWidth : w
                });
            });

            localStorage["photoGalleryImgs"] = JSON.stringify(imgs); //因为此字符串可能是base64字符，appgo无法传
            localStorage["photoGalleryActiveIndex"] = activeIndex;

            $("#J_pg").remove();
            $("<iframe></iframe").appendTo($(".win-body"))
                .attr("id", "J_pg")
                .attr("src", "fix/common/jquery-photo-gallery/gallery.html")
                .css({
                    position : "absolute",
                    left : 0,
                    top : 30,
                    width : winWidth,
                    height : winHeight,
                    background: 'rgba(177, 178, 179, 0.6)',
                    border: '1px solid #6D6D6D',
                    'border-radius': '4px'
                });
            $(".window").css({
                left : (document.body.clientWidth - winWidth) /2,
                top : (document.body.clientHeight - winHeight) /2,
                // left : 0,
                // top : 0,
                width : winWidth
            });
            $(".main").css({
                // left : (document.body.clientWidth - winWidth) /2,
                // top : (document.body.clientHeight - winHeight) /2
                top:0,
                left : 0
            });
            $(".main").show();
        },
        //做初始化
        initGallery : function(){

            var activeIndex = localStorage["photoGalleryActiveIndex"],
                imgs = JSON.parse(localStorage["photoGalleryImgs"]);
            console.log(localStorage["photoGalleryImgs"]);
            localStorage.removeItem("photoGalleryActiveIndex");
            localStorage.removeItem("photoGalleryImgs");

            $(".gallery").photoGallery({
                imgs : imgs,
                activeIndex:activeIndex
            });
            var _parent  =  window.parent || window.top,
                _jg      = _parent.document.getElementById("J_pg"),
                closeWin = _parent.document.getElementById("closeWin"),
                main     = _parent.document.getElementById("main");
                $(closeWin).click(function(){
                console.log("关闭");
                /*var _parent =  window.parent || window.top,
                    _jg = _parent.document.getElementById("J_pg");*/
                $(_jg).hide();
                $(main).hide();
            });
        }
    });

})(jQuery);
